<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Articlemanagement">所有文章</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <div style="display: flex;padding: 0 60px;" class="top">
        <div style="display: flex;padding: 0 60px;">
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            标题:
            <el-input
              v-model="input"
              placeholder="请输入用户标题"
              style="width: 200px;height: 25px;padding-left: 4px;"
            />
          </p>

          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            状态:
            <el-select v-model="value" class="m-2">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </p>
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            分类:
            <el-select v-model="value1" class="m-2">
              <el-option
                v-for="item in li"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
          </p>
        </div>
        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>
      <div class="bom">
        <p>
          <el-button type="primary" style="float: right;margin: 16px;" @click="l()">创建</el-button>
        </p>
        <el-table ref="multipleTableRef" :data="list" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="标题" width="180" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="240">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.fity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签" width="110">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.pan }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="阅读量" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.pan }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="喜欢数" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.pan }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" width="240">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.data }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="p(scope.row.id)">编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleshou(scope.$index, scope.row)"
              >{{ scope.row.tui }}</el-button>
              <el-button size="small" @click="handlefang(scope.$index, scope.row)">查开访问</el-button>
              <el-button size="small" @click="handledel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="example-pagination-block">
          <el-pagination
            layout="prev, pager, next"
            :page-size="3"
            :total="length"
            @current-change="changeCode"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="访问统计">
      <div
        style="width: 90%; height: 300px; border-left: 2px solid #ccc; border-bottom: 2px solid #ccc;"
      ></div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { getZui, souzui, tuijian, delet,getfen } from '../../api'
import { defineComponent, ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { debounce } from 'lodash'
export default defineComponent({
  setup() {
    const router = useRouter()
    const dialogTableVisible = ref(false)
    const value = ref('')
    const value1 = ref('')
    const list = ref()
    const length = ref('')
    const li=ref()
    // id
    const token = localStorage.getItem('token')
    // 管理员或这用户
    const token1 = localStorage.getItem('token1')
    const options = [
      {
        value: '已发布',
        label: '已发布',
      },
      {
        value: '草稿',
        label: '草稿',
      }
    ]
 
    const input = ref('')

    onMounted(() => {
      // 获取文章列表
      getZui().then(res => {
        console.log(res, '99');
        list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
        length.value = res.data.total
      })
      getfen().then(res=>{
        console.log(res);
        li.value=res.data.data
      })
    })
    const page = reactive({
      pageCode: 1,
      pageSize: 3
    })
    const changeCode = (pageCode: number) => {
      console.log(pageCode);

      page.pageCode = pageCode
      console.log(page);

      getZui().then(res => {
        console.log(res);
        list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
        length.value = res.data.total

      })

    }
    const chong = () => {
      value1.value = '',
        value.value = '',
        input.value = ''
        getZui().then(res => {
        console.log(res);
        list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
        length.value = res.data.total

      })
    }


    // 搜索文章列表
    const sou = debounce(() => {
      console.log(value, value1, input);
      if (token1 === '管理员') {
        souzui({ value, value1, input }).then(res => {
          list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value = res.data.total
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    },500)



    // 首焦推荐判断
    const handleshou = (id: any, v: any) => {
      console.log(token, token1);
      if (token1 === "管理员") {
        console.log(1);
        const id2 = v.id
        tuijian({ id2 }).then(res => {
          console.log(res);
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          getZui().then(res => {
            console.log(res, '99');
            list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
            length.value = res.data.total
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }


    }
    // 文章查看
    const handlefang = (id: any, v: any) => {
      console.log(id, v);
      if (token1 === '管理员') {
        dialogTableVisible.value = true
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }

    }
    // 文章删除
    const handledel = (id: any, v: any) => {
      console.log(id, v);
      if (token1 === '管理员') {
        delet(v).then(res => {
          console.log(res);
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          getZui().then(res => {
            console.log(res, '99');
            list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
            length.value = res.data.total
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    const l = () => {
      if (token1 === '管理员') {
        router.push('/wen')
      }
    }
    const p = (id: any) => {
      if (token1 === '管理员') {
        router.push('/detail/' + id)
      }

    }
    return {
      input,
      options,
      value,
      l,
      p,
      value1,
  li,
      list,
      length,
      changeCode,
      chong,
      sou,
      handleshou,
      handlefang,
      handledel,
      dialogTableVisible
    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-top: 10px;
  padding-left: 20px;
}
.top {
  width: 90%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
.bom {
  width: 98%;
  height: 600px;
  background: #fff;
  margin-left: 20px;
}
</style>